<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户id">
                <a-input-search allowClear v-model="queryParam.userid" placeholder="请输入用户id" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="昵称/号码">
                <a-input-search allowClear v-model="queryParam.keyword" placeholder="姓名/号码" />
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="归属地">
                <a-input-search allowClear v-model="queryParam.keyword2" placeholder="归属地" />
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="所在地">
                <a-input-search allowClear v-model="queryParam.keyword3" placeholder="所在地" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="代理区域">
                <city-select v-model="area_arr" data-type="area" value-type="1" @change="areaChange"></city-select>
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group style="float: left" @change="$refs.table.refresh(true)" v-model="tableStatus">
          <a-radio-button value=""> 全部</a-radio-button>
          <a-radio-button :value="1"> 活跃</a-radio-button>
          <a-radio-button :value="2"> 不活跃</a-radio-button>
        </a-radio-group>
        <div>检索结果：{{ totalCount }}条</div>
      </div>
      <a-alert
        v-if="selectedRowKeys.length"
        style="margin-bottom: 16px"
        :message="`已选择 ${selectedRowKeys.length} 项`"
        type="info"
        show-icon
      />
      <s-table
        ref="table"
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        :rowSelection="rowSelection"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :scroll="{ x: 1500 }"
        @getCount="getCount"
      >
        <!-- 卡号 -->

        <span slot="mobile_slot" slot-scope="text, record">
          <a-space>
            <span>
              <a-tooltip>
                <a-row
                  ><div class="">{{ record.sname }}</div></a-row
                >
              </a-tooltip>

              <div>{{ record.mobile }}</div>
            </span>
          </a-space>
        </span>
        <div slot="location_slot" slot-scope="record">
          {{ record.address_data.province || '-' }}{{ record.address_data.city ? '-' + record.address_data.city : ''
          }}{{ record.address_data.district ? '-' + record.address_data.district : '' }}
        </div>

        <!-- 归属地 -->

        <span slot="belonging_slot" slot-scope="text, record">
          <a-space>
            <span>
              <a-tooltip>
                <a-row
                  ><div class="">归属地:{{ record.ad_name }}</div></a-row
                >
              </a-tooltip>

              <div>所在地:{{ record.ad_name }}</div>
            </span>
          </a-space>
        </span>

        <!-- 基本信息 -->
        <span slot="baseinfo" slot-scope="text, record">
          <a-space>
            <img style="width: 48px; heigth: 48px" :src="record.avatar_url" />
            <span>
              <a-tooltip>
                <template slot="title">
                  {{ record.nickname }}
                </template>
                <a-row
                  ><div class="over_e">{{ record.nickname }}</div></a-row
                >
              </a-tooltip>
              <a-row v-if="record.platform == 0">微信</a-row>
              <a-row v-if="record.platform == 1">支付宝</a-row>
              <a-row v-if="record.platform == 2">公众号</a-row>
            </span>
          </a-space>
        </span>

        <!-- 手机号 -->
        <span slot="wayinfo" slot-scope="text, record">
          <div>{{ text || '-' }}</div>
          <div>{{ record.mobile || '-' }}</div>
        </span>
        <!-- 审核时间 -->
        <span slot="time" slot-scope="text, record">
          <!-- <a-space> 申请时间：{{ text }} </a-space> -->
          <a-space>{{ record.updated_at }} </a-space>
        </span>
        <!-- 状态 -->
        <span slot="status" slot-scope="status">
          <a-badge
            :status="status == 0 ? 'default' : status == 1 ? 'default' : status == 2 ? 'error' : 'success'"
            :text="status == 0 ? '待绑卡' : status == 1 ? '待审核' : status == 2 ? '已拒绝' : '已完成'"
          />
        </span>
        <!-- 操作 -->
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="handleEdit(record)" size="small">编辑</a-button>
          <!-- <a-space>
            <a @click="handleStatus(record, 1)">通过</a>
            <a-divider type="vertical" />
            <a @click="handleStatus(record, 2)">拒绝</a>
          </a-space> -->
          
        </span>
      </s-table>
      <a-modal
        :title="'编辑卡包'"
        :width="800"
        :confirm-loading="modalLoading"
        :mask-closable="false"
        :destroy-on-close="true"
        v-model="visiblec"
        @ok="handleOk"
      >
        <a-form class="permission-form" :form="form1">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择套餐">
            <a-select
              @change="levelChange"
              v-decorator="['index', { rules: [{ required: true, message: '请选择会要修改的套餐' }], initialValue:selectedLevel }]"
            >
              <a-select-option :value="item.id" :key="index" v-for="(item,index) in handtc_data">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="活跃值">
            <a-input-number  :min="0"   v-decorator="['name', { rules: [{ required: true, message: '请填写活跃值' }] }]" /> %
            <a-input
              placeholder="活跃值"
              :disabled="false"
             
            />
          </a-form-item>

        </a-form>
      </a-modal>
    </a-card>

    <a-modal v-model="visible" title="下级用户">
      <table>
        <tr>
          <th class="table-style">序号</th>
          <th class="table-style">分销商</th>
          <th class="table-style">下线等级</th>
          <th class="table-style">昵称</th>
        </tr>
        <tr
          v-if="now_level == 1 && first.length > 0"
          :value="item.nickname"
          v-for="(item, index) of first"
          :key="index"
        >
          <td class="table-style">{{ index }}</td>
          <td class="table-style">{{ records.nickname }}</td>
          <td class="table-style">一级</td>
          <td class="table-style">{{ item }}</td>
        </tr>
        <tr
          v-if="now_level == 2 && second.length > 0"
          :value="item.nickname"
          v-for="(item, index) of second"
          :key="index"
        >
          <td class="table-style">{{ index }}</td>
          <td class="table-style">{{ records.nickname }}</td>
          <td class="table-style">二级</td>
          <td class="table-style">{{ item }}</td>
        </tr>
        <tr
          v-if="now_level == 3 && third.length > 0"
          :value="item.nickname"
          v-for="(item, index) of third"
          :key="index"
        >
          <td class="table-style">{{ index }}</td>
          <td class="table-style">{{ records.nickname }}</td>
          <td class="table-style">三级</td>
          <td class="table-style">{{ item }}</td>
        </tr>
      </table>
    </a-modal>
    <a-modal v-model="qrcode_visiable" title="分销二维码" :footer="null">
      <img :src="qrcode_img" />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { cardList,updateLevelInfo,handtc} from '@/api/subscribe'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'
import CitySelect from '@/components/CitySelect/CitySelect'
const columns = [
  {
    title: '用户ID',
    dataIndex: 'user_id',
    scopedSlots: { customRender: 'user_id' },
    width: 80,
  },
  {
    title: '用户名称',
    dataIndex: 'nickname',
    width: 150,
    scopedSlots: { customRender: 'baseinfo' },
    ellipsis: true,
  },
  {
    title: '套餐名称',
    dataIndex: 'goods_name',
    ellipsis: true,
    width: 200,
  },
  {
    title: '办理手机',
    dataIndex: 'mobile',
    ellipsis: true,
    scopedSlots: { customRender: 'mobile_slot' },
    width: 200,
    // width: 80,
  },
  {
    title: '区域定位',
    scopedSlots: { customRender: 'location_slot' },
    width: 180,
  },
  {
    title: '归属地',
    dataIndex: 'belonging',
    ellipsis: true,
    scopedSlots: { customRender: 'belonging_slot' },
    width: 150,
  },
  {
    title: '月缴费用',
    dataIndex: 'monthly_price',
    ellipsis: true,
    width: 100,
    // width: 80,
  },
  {
    title: '话费余额',
    dataIndex: 'phone_balance',
    ellipsis: true,
    // width: 100,
  },
  {
    title: '累计充值',
    dataIndex: 'sum_recharge',
    ellipsis: true,
    // width: 100,
    // width: 80,
  },
  {
    title: '活跃值',
    dataIndex: 'active_num',
    // width: 100,
    // width: 150,
  },
  {
    title: '创建时间',
    dataIndex: 'date',
    // width: 200,
    sorter: (a, b) => a.addtime - b.addtime,
    // width: 250,
    // scopedSlots: { customRender: 'time' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: 50,
  },
]

export default {
  name: 'ShareUserList',
  components: {
    STable,
    Ellipsis,
    NoBorderRadio,
    CitySelect,
  },
  data() {
    this.columns = columns
    return {
      area_arr: [],
      handtc_data:[],
      totalCount: 0,
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '未审核',
          value: 0,
        },
        {
          title: '审核通过',
          value: 1,
        },
        {
          title: '审核拒绝',
          value: 2,
        },
      ],
      form1: this.$form.createForm(this),
      qrcode_img: '',
      qrcode_visiable: false,
      now_level: String,
      // create model
      visible: false,
      visiblec: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      records: {},
      first: {},
      second: {},
      third: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        keyword: null,
        keyword2: null,
        keyword3: null,
        phone: null,
      },
      sellerComments: '',
      tabKey: '',
      tableStatus: '',
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam, {
          active_num: this.tableStatus,
          status: '-1',
          province: this.province,
          city: this.city,
          district: this.district,
        })
        console.log('loadData request parameters:', parameter)
        parameter = {
          ...parameter,
          active_num: this.tableStatus,
          status: '-1',
          province: this.province,
          city: this.city,
          district: this.district,
        }
        return cardList(parameter).then((res) => {
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      province: '',
      city: '',
      district: '',
    }
  },
  filters: {},
  created() {
    this.handtcc()
  },
  watch: {
    
    selectedRowKeys(newValue, oldValue) {
      console.log(newValue, oldValue)
    },
  },
  computed: {
    
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
  methods: {

    handtcc(e) {
         handtc(e)
          .then((res) => {
            console.log(res,'hiuasxjasixjasmxop')
            this.handtc_data = res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
    },
    handleOk(e) {
      e.preventDefault()
      this.form1.validateFields((err, values) => {
        
        if (err) {
          return false
        }
        this.modalLoading = true
        var msg = '创建成功'
        var type = 'add'
        if (!this.isNew) {
          values.id = this.records.id
          msg = '编辑成功'
          type = 'edit'
        }
        values.type = type
        values.status = this.selectRadio
        values.level = this.selectedLevel
        values.image = this.image
        values.synopsis = JSON.stringify(this.records.synopsis)
        // console.log(values)
  
        updateLevelInfo(values)
          .then((res) => {
            console.log(res)
            this.modalLoading = false
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(msg)
              this.visiblec = false
              this.$refs.table.refresh()
            }
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.modalLoading = false
          })
      })
    },
    handleEdit(record) {
      console.log(record)
      this.visiblec = true
      this.$nextTick(() => {
        this.form1.setFieldsValue(
          pick(record, ['level', 'name', 'money', 'discount', 'fybili', 'price', 'synopsis', 'detail', 'buy_prompt'])
        )
      })
      this.isNew = false
      this.image = record.image
      console.log(record)
      this.selectedLevel = record.level
      this.selectRadio = record.status
      this.records = record
      console.log(this.records)
    },
    qrcode(val) {
      console.log(val)
      var params = {
        user_id: val,
      }
      getQrcode(params)
        .then((res) => {
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.qrcode_img = res.data.url
            this.qrcode_visiable = true
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {}
    },
    tabChange(key) {
      this.queryParam.status = key
      this.$refs.table.refresh(true)
    },
    getLevel(record, level) {
      this.records = record
      this.first = record.first.team
      this.second = record.second.team
      this.third = record.third.team
      this.now_level = level
      this.visible = true
    },
    setComments(record) {
      var params = {
        id: record.id,
        seller_comments: this.sellerComments,
      }
      setComments(params)
        .then((res) => {
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$message.success('备注成功')
            this.$refs.table.refresh()
          }
          this.sellerComments = ''
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    handleStatus(record, status) {
      var params = {
        id: record.id,
        status: status,
      }
      var returnMsg = '拒绝成功！'
      if (status === 1) {
        returnMsg = '通过成功！'
      }
      setAudit(params).then((res) => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success(returnMsg)
        }
      })
    },
    handleDelete(record) {
      var params = {
        id: record.id,
      }
      setDel(params).then((res) => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success('删除成功！')
        }
      })
    },
    jump(record, type) {
      if (type === 1) {
        this.$router.push({ name: 'ShareOrder', query: { parent_id: record.user_id } })
      } else {
        this.$router.push({ name: 'ShareCash', query: { id: record.id } })
      }
    },
    // 点击批量操作
    handleMenuClick(e) {
      let status = e.key
      if (this.selectedRowKeys.length > 0) {
        var params = {
          id: this.selectedRowKeys,
          status: status,
        }
        var returnMsg = '拒绝成功！'
        if (status === 1) {
          returnMsg = '通过成功！'
        }
        setAudit(params).then((res) => {
          this.modalLoading = false
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$refs.table.refresh()
            this.$message.success(returnMsg)
          }
        })
      }
    },
    getCount(e) {
      this.totalCount = e
    },
    // 搜索地区
    areaChange(e, selectedOptions) {
      if (selectedOptions) {
        if (selectedOptions[0]) {
          this.province = selectedOptions[0].label
        } else {
          this.province = ''
        }
        if (selectedOptions[1]) {
          this.city = selectedOptions[1].label
        } else {
          this.city = ''
        }
        if (selectedOptions[2]) {
          this.district = selectedOptions[2].label
        } else {
          this.district = ''
        }
      } else {
        this.province = ''
        this.city = ''
        this.district = ''
      }
    },
  },
}
</script>
<style lang="less" scoped>
.top_card {
  /deep/.ant-card-body {
    padding-bottom: 0;
  }
  /deep/.ant-tabs-bar {
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
}
.button_style {
  margin-top: 3px;
}
.table-style {
  padding: 0 30px;
}
.over_e {
  width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ant-cascader-picker,
.ant-cascader-input {
  height: 32px;
}
</style>
